import * as THREE from 'three'
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 15;
camera.position.x = 15;
camera.position.y = 15;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


// 启用阴影映射
renderer.shadowMap.enabled = true; // 设置渲染器，允许光源阴影渲染
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 软阴影

// 创建一个平面作为接收阴影的对象
var planeGeometry = new THREE.PlaneGeometry(25, 25);
var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // 平面朝上
plane.receiveShadow = true; // 接收阴影
scene.add(plane);

// 创建一个立方体作为投射阴影的对象
var cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
var cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.y = 4; // 把立方体放置在平面上方
cube.castShadow = true; // 投射阴影
scene.add(cube);

// 创建平行光
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
let obj = {
  x: 5,
  y: 10,
  z: 5,
}
let n = 1.5
// directionalLight.position.set(obj.x * n, obj.y * n, obj.z * n).normalize(); // 设置光源位置
directionalLight.position.set(obj.x * n, obj.y * n, obj.z * n) // 设置光源位置
directionalLight.castShadow = true; // 允许平行光投射阴影
// 如果需要确保光照方向，可以使用 lookAt 方法
var target = new THREE.Vector3(0, 0, 0); // 目标点通常是场景中的对象或原点
directionalLight.target.position.copy(target);
// 设置平行光的阴影参数
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 20;
directionalLight.shadow.bias = -0.001; // 减少阴影边缘的锯齿现象
directionalLight.shadow.mapSize.width = 1024; // 阴影贴图分辨率
directionalLight.shadow.mapSize.height = 1024;

scene.add(directionalLight);

// 添加辅助工具来可视化平行光的阴影摄像机
var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(helper);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼效果
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener("change", function () {
  renderer.render(scene, camera); //执行渲染操作
  // 浏览器控制台查看相机位置变化
  // console.log("camera.position", camera.position);
});
// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 更新立方体的位置以模拟动画
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

window.onresize = function () {
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
};